{include="header"}

<div class="panel panel-default" style="margin: 5px;">
   <div class="panel-heading">
      <h3 class="panel-title">Mejores clientes del mes</h3>
   </div>
   <div class="panel-body">
      <div id="chart_clientes_del_mes">
         <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
               <div class="text-center">
                  <canvas id="canvas_chart_clientes_del_mes" height="125"></canvas>
                  <div id="legend_chart_clientes_del_mes"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="panel panel-default" style="margin: 5px;">
   <div class="panel-heading">
      <h3 class="panel-title"><span class="text-capitalize">{#FS_ALBARANES#}</span> de los últimos días</h3>
   </div>
   <div class="panel-body">
      <div id="chart_albaranes_day">
         <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
               <div class="text-center">
                  <canvas id="canvas_chart_albaranes_day" height="125"></canvas>
                  <div id="legend_chart_albaranes_day"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="panel panel-default" style="margin: 5px;">
   <div class="panel-heading">
      <h3 class="panel-title"><span class="text-capitalize">{#FS_ALBARANES#}</span> de los últimos meses</h3>
   </div>
   <div class="panel-body">
      <div id="chart_albaranes_month">
         <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
               <div class="text-center">
                  <canvas id="canvas_chart_albaranes_month" height="125"></canvas>
                  <div id="legend_chart_albaranes_month"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="panel panel-default" style="margin: 5px;">
   <div class="panel-heading">
      <h3 class="panel-title"><span class="text-capitalize">{#FS_ALBARANES#}</span> de los últimos años</h3>
   </div>
   <div class="panel-body">
      <div id="chart_albaranes_year">
         <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
               <div class="text-center">
                  <canvas id="canvas_chart_albaranes_year" height="125"></canvas>
                  <div id="legend_chart_albaranes_year"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<script>
   var barChartData_clientes_del_mes = {
      labels: [{loop="$fsc->stats_best_clients()"}{if="$counter<4"}"{$value["nombrecliente"]}",{else}"{$value["nombrecliente"]}"{/if}{/loop}],
      datasets : [
         {
            label: "Mejores clientes del mes",
            fillColor : "rgba(125,234,125,0.2)",
            strokeColor : "rgba(125,234,125,0.8)",
            highlightFill: "rgba(125,234,125,0.75)",
            highlightStroke: "rgba(125,234,125,1)",
            data : [{loop="$fsc->stats_best_clients()"}{if="$counter<4"}"{$value["total_cli"]}",{else}"{$value["total_cli"]}"{/if}{/loop}]
         }
      ]
   }
   
   var lineChartData_last_days = {
      labels: [{loop="$fsc->stats_last_days()"}{if="$counter<25"}"{$value["day"]}",{else}"{$value["day"]}"{/if}{/loop}],
      datasets : [
         {
            label: "Total ventas diario",
            fillColor : "rgba(125,234,125,0.2)",
            strokeColor : "rgba(125,234,125,1)",
            pointColor : "rgba(125,234,125,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(125,234,125,1)",
            data : [{loop="$fsc->stats_last_days()"}{if="$counter<25"}"{$value["total_cli"]}",{else}"{$value["total_cli"]}"{/if}{/loop}]
         },
         {
            label: "Total compras diario",
            fillColor : "rgba(241,129,129,0.2)",
            strokeColor : "rgba(241,129,129,1)",
            pointColor : "rgba(241,129,129,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(241,129,129,1)",
            data : [{loop="$fsc->stats_last_days()"}{if="$counter<25"}"{$value["total_pro"]}",{else}"{$value["total_pro"]}"{/if}{/loop}]
         }
      ]
   }
   
   var lineChartData_last_months = {
      labels: [{loop="$fsc->stats_last_months()"}{if="$counter<12"}"{$value["month"]}",{else}"{$value["month"]}"{/if}{/loop}],
      datasets : [
         {
            label: "Total ventas mensual",
            fillColor : "rgba(125,234,125,0.2)",
            strokeColor : "rgba(125,234,125,1)",
            pointColor : "rgba(125,234,125,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(125,234,125,1)",
            data : [{loop="$fsc->stats_last_months()"}{if="$counter<12"}"{$value["total_cli"]}",{else}"{$value["total_cli"]}"{/if}{/loop}]
         },
         {
            label: "Total compras mensual",
            fillColor : "rgba(241,129,129,0.2)",
            strokeColor : "rgba(241,129,129,1)",
            pointColor : "rgba(241,129,129,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(241,129,129,1)",
            data : [{loop="$fsc->stats_last_months()"}{if="$counter<12"}"{$value["total_pro"]}",{else}"{$value["total_pro"]}"{/if}{/loop}]
         }
      ]
   }
   
   var lineChartData_last_years = {
      labels: [{loop="$fsc->stats_last_years()"}{if="$counter<5"}"{$value["year"]}",{else}"{$value["year"]}"{/if}{/loop}],
      datasets : [
         {
            label: "Total ventas anual",
            fillColor : "rgba(125,234,125,0.2)",
            strokeColor : "rgba(125,234,125,1)",
            pointColor : "rgba(125,234,125,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(125,234,125,1)",
            data : [{loop="$fsc->stats_last_years()"}{if="$counter<5"}"{$value["total_cli"]}",{else}"{$value["total_cli"]}"{/if}{/loop}]
         },
         {
            label: "Total compras anual",
            fillColor : "rgba(241,129,129,0.2)",
            strokeColor : "rgba(241,129,129,1)",
            pointColor : "rgba(241,129,129,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(241,129,129,1)",
            data : [{loop="$fsc->stats_last_years()"}{if="$counter<5"}"{$value["total_pro"]}",{else}"{$value["total_pro"]}"{/if}{/loop}]
         }
      ]
   }
   
   var options = {
      responsive: true,
      animation: false,
      tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
      segmentStrokeColor : "#f9f9f9",
      legendTemplate :   "<ul>"
                        +"<% for (var i=0; i<datasets.length; i++){%>"
                        +"<li>"
                           +"<span style=\"background-color:<%=datasets[i].fillColor%>\">"
                              +"<%if(datasets[i].label){%><%=datasets[i].label%><%}%>"
                           +"</span>"
                        +"</li>"
                        +"<%}%>"
                     +"</ul>"
   }
   
   window.onload = function(){
      var ctx_canvas_chart_clientes_del_mes = document.getElementById("canvas_chart_clientes_del_mes").getContext("2d");
      var Chart_bar_clientes_del_mes = new Chart(ctx_canvas_chart_clientes_del_mes).Bar(barChartData_clientes_del_mes, options);
      var Chart_legend_clientes_del_mes = document.getElementById('legend_chart_clientes_del_mes');
      Chart_legend_clientes_del_mes.innerHTML = Chart_bar_clientes_del_mes.generateLegend();

      var ctx_canvas_chart_albaranes_day = document.getElementById("canvas_chart_albaranes_day").getContext("2d");
      var Chart_lines_last_days = new Chart(ctx_canvas_chart_albaranes_day).Line(lineChartData_last_days, options);
      var Chart_legend_last_days = document.getElementById('legend_chart_albaranes_day');
      Chart_legend_last_days.innerHTML = Chart_lines_last_days.generateLegend();
      
      var ctx_canvas_chart_albaranes_month = document.getElementById("canvas_chart_albaranes_month").getContext("2d");
      var Chart_lines_last_months = new Chart(ctx_canvas_chart_albaranes_month).Line(lineChartData_last_months, options);
      var Chart_legend_last_month = document.getElementById('legend_chart_albaranes_month');
      Chart_legend_last_month.innerHTML = Chart_lines_last_months.generateLegend();
      
      var ctx_canvas_chart_albaranes_year = document.getElementById("canvas_chart_albaranes_year").getContext("2d");
      var Chart_lines_last_years = new Chart(ctx_canvas_chart_albaranes_year).Line(lineChartData_last_years, options);
      var Chart_legend_last_years = document.getElementById('legend_chart_albaranes_year');
      Chart_legend_last_years.innerHTML = Chart_lines_last_years.generateLegend();
   }
</script>

{include="footer"}
